<template>
  <div class="container">
    <el-card style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span class="account">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          style="float: right"
          type="success"
          icon="el-icon-edit"
          @click="$router.push(`/questions/new`)"
          >新增试题</el-button
        >
      </div>
      <!-- 选择区域 -->
      <QuestionsChoiceItem
        :subjectList="subjectList"
        :list="list"
        :keys="keys"
        @search="search"
        :page="page"
      />
      <!-- /选择区域 -->
      <!-- 导航区域 -->
      <!-- @tab-click="handleClick" -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-alert
          :title="`数据一共${page.count}条`"
          type="info"
          show-icon
          style="margin-bottom: 20px"
        >
        </el-alert>
        <!-- 全部 -->
        <el-tab-pane label="全部" name="1">
          <TabPane
            :list="list"
            @previewBtn="previewBtn"
            @choicePublish="choicePublish"
            @delQuestion="delQuestion"
          />
        </el-tab-pane>
        <!-- /全部 -->
        <!-- 待审核 -->
        <el-tab-pane label="待审核" name="2">
          <TabPane
            :list="cList"
            @previewBtn="previewBtn"
            @choicePublish="choicePublish"
            @delQuestion="delQuestion"
          />
        </el-tab-pane>
        <!-- /待审核 -->
        <!-- 已审核 -->
        <el-tab-pane label="已审核" name="3">
          <TabPane
            :list="cList"
            @previewBtn="previewBtn"
            @choicePublish="choicePublish"
            @delQuestion="delQuestion"
          />
        </el-tab-pane>
        <!-- 已审核 -->
        <!-- 已拒绝 -->
        <el-tab-pane label="已拒绝" name="4">
          <TabPane
            :list="cList"
            @previewBtn="previewBtn"
            @choicePublish="choicePublish"
            @delQuestion="delQuestion"
          />
        </el-tab-pane>
        <!-- 已拒绝 -->
      </el-tabs>
      <!-- /导航区域 -->

      <!-- 分页 -->
      <el-row justify="end" style="margin-top: 20px" type="flex">
        <el-pagination
          background
          style="margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="getList"
          :current-page.sync="page.page"
          :page-sizes="[1, 2, 3, 5]"
          :page-size.sync="page.pagesize"
          layout=" sizes, prev, pager, next, jumper"
          :total="page.count"
        >
        </el-pagination>
      </el-row>
      <!-- /分页 -->
    </el-card>

    <Preview :showDialog.sync="showDialog" :previewObj="previewStr" />
  </div>
</template>

<script>
import QuestionsChoiceItem from '../components/questions-choice-item.vue'
import Preview from '../components/Preview.vue'
import TabPane from '../components/tab-pane.vue'
import { choice, choiceAdd, choicePublish } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'QuestionsChoice',
  data () {
    return {
      activeName: '1',
      list: [],
      cList: [],
      subjectList: [],
      page: {
        page: 1, // 当前页码
        pagesize: 5, // 每页显示的条数
        count: 0 // 总数
      },
      showDialog: false,
      questionForm: {},
      previewStr: {}, // 预览功能
      keys: 1
    }
  },
  components: { QuestionsChoiceItem, Preview, TabPane },
  created () {
    this.getList()
  },
  methods: {
    handleClick () {
      if (this.activeName === '2') {
        this.cList = this.list.filter(item => {
          return item.chkState === 0
        })
        this.page.count = this.cList.length
      } else if (this.activeName === '3') {
        this.cList = this.list.filter(item => {
          return item.chkState === 1
        })
        this.page.count = this.cList.length
      } else if (this.activeName === '4') {
        this.cList = this.list.filter(item => {
          return item.chkState === 2
        })
        this.page.count = this.cList.length
      } else {
        this.page.count = this.list.length
      }
    },
    search (data) {
      // console.log(i)
      console.log(data)
      this.list = data
      this.page.count = data.length
    },
    // 获取精选题库数据
    async getList () {
      const { data } = await choice(this.page)
      const res = await simple()
      this.subjectList = res.data
      this.page.count = data.counts
      this.list = data.items
      // console.log(this.list)
    },
    // 每页显示条数变化触发事件
    handleSizeChange (val) {
      // console.log(val)
      this.page.pagesize = val
      this.getList()
      // console.log(this.page.pagesize)
    },
    // 删除题库
    async delQuestion (row) {
      // console.log(row)
      row.choiceState = 0
      try {
        await this.$confirm('您确定删除该题库吗', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        // console.log(row)
        await choiceAdd(row)
        if (this.page.count % this.page.pagesize === 1 && this.page.page > 1) {
          this.page.page--
        }
        this.getList()
        this.$message.success('删除题库成功')
      } catch (error) {
        this.$message.error('删除题库失败')
      }
    },
    // 题库下架
    async choicePublish (row) {
      try {
        await this.$confirm(
          `您确定${row.publishState === 1 ? '上架' : '下架'}该题库吗`,
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        // row.publishState = 0
        // console.log(row)
        if (row.publishState === 0) {
          row.publishState = 1
          // await choicePublish(row)
        } else {
          row.publishState = 0
        }

        await choicePublish(row)
        this.getList()
        this.$message.success(
          `${row.publishState === 1 ? '下架' : '上架'}题库成功`
        )
      } catch (error) {
        // this.$message.error(
        //   `${row.publishState === 1 ? '下架' : '上架'}题库失败`
        // )
        this.$message({
          type: 'info',
          message: `已取消${row.publishState === 1 ? '上架' : '下架'}题库`
        })
      }
    },
    previewBtn (row) {
      this.showDialog = true
      this.previewStr = row
    }
  }
}
</script>

<style scoped lang="less">
.account {
  font-size: 12px;
  color: rgb(255, 192, 203);
  margin: 20px 30px;
}
</style>
